<template>
  <div class="alert" v-show="aaa">
      <h3>{{bbb.title}}</h3>
      <p>{{bbb.content}}</p>
      <h6><button v-show="bbb.QueDing" @click="fn">确定</button><button v-show="bbb.QuXiao" @click="fn">取消</button></h6>
  </div>
</template>

<script>
export default {
    data(){
        return {
            flang:false
        }
    },
    props:{
        aaa:Boolean,
        bbb:Object
    },
    methods: {
        fn(){
            this.$emit('flang',this.flang)
        }
    },
}
</script>

<style lang="scss">
    .alert{
        width: 200px;
        height: 200px;
        background: palevioletred;
        border-radius:20px; 
        margin:0 auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        h3{
            text-align:center;
        }
        p{
            width: 100%;
            flex: 1;
            background: paleturquoise
        }
        h6{
            display: flex;
            justify-content: space-around;
            height: 40px;
            align-items: center;
           button{
            width: 40%;
            height: 25px;
        } 
        }
        
    }
</style>